<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>task list</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        #time {
            font-size: 24px;
            font-weight: bold;
        }
        #block {
            margin-left: 2%;
            margin-top: 20px;
        }
        th ,td {
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="time"></div>

    <div id="block">
        <table id="myTable">
            <tr>
                <th>DO</th>
                <th id = 'sunday'>Sunday(1)</th>
                <th id = 'monday'>Monday(2)</th>
                <th id = 'tuesday'>Tuesday(3)</th>
                <th id = 'wednesday'>Wednesday(4)</th>
                <th id = 'thursday'>Thursday(5)</th>
                <th id = 'friday'>Friday(6)</th>
                <th id ='saturday'>Saturday(7)</th>
            </tr>
            <tr>
                <td id ="1"><b>10:00-12:00(1)</b></td>
                <td id="11"></td>
                <td id="12"></td>
                <td id="13"></td>
                <td id="14"></td>
                <td id="15"></td>
                <td id="16"></td>
                <td id="17"></td>
            </tr>
            <tr>
                <td id ="2"><b>12:00-14:00(2)</b></td>
                <td id = "21"></td>
                <td id = "22"></td>
                <td id = "23"></td>
                <td id = "24"></td>
                <td id = "25"></td>
                <td id = "26"></td>
                <td id = "27"></td>
            </tr>
            <tr>
                <td id ="3"><b>14:00-18:00(3)</b></td>
                <td id = "31"></td>
                <td id = "32"></td>
                <td id = "33"></td>
                <td id = "34"></td> 
                <td id = "35"></td>
                <td id = "36"></td>
                <td id = "37"></td>          
            </tr>
            <tr>
                <td id ="4"><b>18:00-20:00(4)</b></td>
                <td id = "41"></td>
                <td id = "42"></td>
                <td id = "43"></td>
                <td id = "44"></td>
                <td id = "45"></td>
                <td id = "46"></td>
                <td id = "47"></td>
            </tr>
            <tr>
                <td id ="5"><b>20:00-22:00(5)</b></td>
                <td id = "51"></td>
                <td id = "52"></td>
                <td id = "53"></td>
                <td id = "54"></td>
                <td id = "55"></td>
                <td id = "56"></td>
                <td id = "57"></td>
            </tr>
        </table>
    </div>

<input type="text" id="number" placeholder="输入数字(坐标例如 33)"> <!-- 输入框，用于输入内容 -->
<input type="text" id="input" placeholder="输入内容"> <!-- 输入框，用于输入内容 -->
<button onclick="add()">添加</button> <!-- 按钮，用于添加内容 -->
<button onclick="dele()">删除</button> <!-- 按钮，用于删除内容 -->
<button onclick="done()">done</button> 

<div>
    <h2 style="text-align:center;margin-top:70px">BY: xupeng</h2>
</div>

<script>
    function updateTime() {
        const now = new Date();
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');

        const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        const day = days[now.getDay()];

        document.getElementById('time').textContent = `${hours}:${minutes}:${seconds}  ${day}`;
    }

    function add() {
        const input = document.getElementById('input').value.trim();
        const number = Number(document.getElementById('number').value.trim());

        if (input !== '' && !isNaN(number)) {
            document.getElementById(number).innerHTML = input; // 添加内容到表格
            saveToLocalStorage(number, input); // 保存到 localStorage
        }

        document.getElementById('input').value = ''; // 清空输入框
    }

    function done() {
        const number = Number(document.getElementById('number').value.trim());

        document.getElementById(number).innerHTML = 'done'; // 添加内容到表格
        saveToLocalStorage(number,'done'); // 保存到 localStorage); // 保存到 localStorage

        input.value = ''; // 清空输入框
    }

    function dele() {
        const number = Number(document.getElementById('number').value.trim());

        document.getElementById(number).innerHTML = ''; // 添加内容到表格
        saveToLocalStorage(number,''); // 保存到 localStorage

        input.value = ''; // 清空输入框
    }

    function saveToLocalStorage(number, content) {
        let tasks = JSON.parse(localStorage.getItem('tasks')) || {};
        tasks[number] = content; // 更新或添加任务
        localStorage.setItem('tasks', JSON.stringify(tasks)); // 保存到 localStorage
    }

    function loadFromLocalStorage() {
        const tasks = JSON.parse(localStorage.getItem('tasks')) || {};
        Object.keys(tasks).forEach(function(key) {
            document.getElementById(key).innerHTML = tasks[key]; // 加载内容
        });
    }
    loadFromLocalStorage(); // 加载 localStorage

    updateTime(); // 初始调用
    setInterval(updateTime, 1000); // 每秒更新一次时间
</script>
</body>
</html>